<template>
  <div class="show">

    <p class="allTitle"><a onclick="window.history.go(-1)"></a>商品详情</p>

    <div class="showBig">
      <img :src="date.goods_logo">
    </div>
    <div class="showInfo">
        <p class="title">{{date.goods_name}}</p>
        <p class="sTitle"><span>包邮</span>深圳</p>
        <p class="price">￥{{date.goods_prices}}<span>{{goods.num}}人付款</span></p>
    </div>
    <div class="showClick">
      <!-- <span class="prcie">￥{{date.goods_prices}}</span> -->
      <span class="cart" @click="addCart">加入购物车</span>
      <span class="pay" @click="goCart">立即付款</span>
    </div>
    <div class="showBox" v-html="date.goods_desc"></div>
  </div>
</template>

<script>
import {Get,Post} from '@/config/api.js'
import axios from 'axios'
export default {
  props:['getId'],
  name: 'hello',
  data () {
    return {
      id:null,
      banner:['../static/images/prcBig.jpg','../static/images/prcBig.jpg','../static/images/prcBig.jpg'],
      goods:{
        num:'5000'
      },
      date:[]
    }
  },
  mounted(){
      this.getDate()
  },
  methods:{
    getDate(){
        this.id = this.$route.query.id;
        if(this.id!=null){
          let that=this
          Get('/goods/'+this.id,this.$store.state.token).then(function(reg){
            that.date=reg.data;
          })
        }else{
          this.$router.push('/home')
        }
    },
    //加入购物车
    addCart(){
        if(this.vLogin()){
          let that=this
          let data={
            "goods_id":this.id,
            "goods_count":1
          }
          Post('/carts',this.$store.state.token,data).then(function(){
            alert('已加入购物车')
          })
        }
    },
    //立即购买
    goCart(){
        if(this.vLogin()){
          let that=this
          let data={
            "goods_id":this.id,
            "goods_count":1
          }
          Post('/carts',this.$store.state.token,data).then(function(){
            that.$router.push('/cart')
          })
        }
        
    }
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="" type="text/css">

$vw:750;
@function h($px){@return $px/$vw*100vw}

.showBig{min-height: h(520);}
.showBig img{width: 100%}
.showInfo{padding: h(20);background: #fff;overflow: hidden;}
.showInfo .price{color:#fd7b59;}
.title{text-align: left;font-size: h(30);color:#8f8f8f;margin-bottom: h(20)}
.sTitle{text-align: right;font-size: h(30);color:#8f8f8f;margin-bottom: h(20)}
.sTitle span{font-size: h(28);color:#fff;background: #f4b07d;display: inline-block;border-radius: h(8);padding: h(2) h(16);float: left}
.size{overflow: hidden;padding-bottom: h(40)}
.size p{font-size: h(36);color: #406266;width: h(100);float: left;line-height: h(60)}
.size span{font-size: h(30);height: h(60);padding: 0 h(18);margin-right: h(20);border: #f4b07d solid 1px;color: #406266;display: inline-block;line-height: h(60)}
.size span.active{background: #f4b07d;color: #fff;}
.price{font-size: h(32);color:#506e71;}
.price span{font-size: h(30);color: #8f8f8f;float: right}

.showClick{background: #fff;margin-top: h(20);line-height: h(100);overflow: hidden;}
.showClick .prcie{font-size: h(38);color:#fd6854;width: h(290);display: inline-block;text-align: center;float: left}
.showClick .cart{width:50%;height: h(100);background: url('/static/images/car.png') h(20) no-repeat #fafafa;display: inline-block;background-size: auto 100%;float: left;text-indent: h(130);color: #fd7b59}
.showClick .pay{width:50%;height: h(100);background:#fd7b59;display: inline-block;color: #fff;text-align: center}

.showBox{margin-top: h(20);padding: h(10);padding-bottom: h(120)}
.showBox img{padding: 0;margin: 0;border: none; outline-width:0px;vertical-align:top;  }
</style>
